<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <!-- import CSS -->
  <link rel="stylesheet" href="./css/element.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

  <style>
    @font-face {
      font-family: "AlibabaPuHuiTi";
      src: url("../font/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2"),
        url("../font/AlibabaPuHuiTi-3-55-Regular.woff") format("woff"),
        url("../font/AlibabaPuHuiTi-3-55-Regular.ttf") format("truetype"),
        url("../font/AlibabaPuHuiTi-3-55-Regular.otf") format("opentype"),
        url("../font/AlibabaPuHuiTi-3-55-Regular.eot") format("embedded-opentype");
    }

    body {
      font-family: "AlibabaPuHuiTi", sans-serif;
    }

    #app {
      padding: 0;
    }

    .el-header {
      background-color: #b3c0d1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-menu-item.is-active {
      color: #ff6a00;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header style="background-color: white; line-height: 20px">
        <h1 style="font-size: 20px; color: black; font-weight: 100">
          <img src="imgs/alilogo.jpg" style="width: 150px" />
          阿里巴巴集团企业官网后台管理系统
          <span style="float: right; font-size: 15px;white-space:nowrap;">
            <p>欢迎您，{{username}} <span @click="logout">退出登录</span></p>
          </span>
        </h1>
      </el-header>
      <el-menu :default-active=['1'] class="el-menu-demo" mode="horizontal" @select="menuChange">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>首页视频管理</template>
          <el-menu-item index="1-1">视频管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-picture"></i>新闻公告管理</template>

          <el-menu-item index="2-1">新闻列表</el-menu-item>
          <el-menu-item index="2-2">添加新闻</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-shopping-cart-2"></i>首页轮播文字管理</template>
          <el-menu-item-group>
            <el-menu-item index="3-1">轮播文字列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <!-- 分类列表 -->
      <el-table v-show="selectIndex=='1-1'" :data="videoArr">
        <el-table-column type="index" label="编号" width="140">
        </el-table-column>
        <el-table-column prop="url" label="视频" width="200">
          <template slot-scope="scope">
            <video :src="scope.row.url" controls autoplay muted loop preload="auto" style="height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" slot="reference" style="background-color: #ff6a00; color: white"
              @click="updateVideoUrl(scope.$index)">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新闻公告列表 -->
      <el-table v-show="selectIndex=='2-1'" :data="newsArr">
        <el-table-column type="index" label="编号" width="140">
        </el-table-column>
        <el-table-column prop="title" label="文字" width="200">
        </el-table-column>
        <el-table-column prop="image" label="图片" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.image" width="200px" height="100px" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" slot="reference" style="background-color: #ff6a00; color: white"
              @click="updateNewsTitle(scope.$index)">修改文字
            </el-button>
            <el-button size="mini" slot="reference" style="background-color: #ff6a00; color: white"
              @click="updateNewsImage(scope.$index)">修改图片链接
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 首页轮播文字列表 -->
      <el-table v-show="selectIndex=='3-1'" :data="textArr">
        <el-table-column type="index" label="编号" width="140">
        </el-table-column>
        <el-table-column prop="text1" label="文字段1" width="200">
        </el-table-column>
        <el-table-column prop="text2" label="文字段2" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" slot="reference" style="background-color: #ff6a00; color: white"
              @click="openDrawer(scope.row)">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-main>
    </el-container>
    <el-dialog title="修改轮播文字" :visible.sync="dialogVisible" width="50%">
      <el-form>
        <el-form-item label="第一段文字">
          <el-input v-model="swipetext.text1"></el-input>
        </el-form-item>
        <el-form-item label="第二段文字">
          <el-input v-model="swipetext.text2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateText">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: "#app",
    data() {
      return {
        username: "",
        selectIndex: "1-1",
        videoArr: [],
        newsArr: [],
        textArr: [],
        dialogVisible: false,
        swipetext: {
          text1: "",
          text2: ""
        }
      };
    },
    created() {
      // 检查 localStorage 中是否存在用户名
      if (!localStorage.getItem('username')) {
        // 如果不存在，将用户重定向到登录页面
        this.$message({
          message: "请先登录",
          type: 'warning'
        });
        location.href = 'login.html';
      } else {
        // 如果存在，将用户名存储在 data 对象中
        this.username = localStorage.getItem('username');
      }
      //当页面加载完毕时会触发此部分代码
      this.loadVideo();
      this.loadNews();
      this.loadSwipeText();
    },
    methods: {
      menuChange(index) {
        this.selectIndex = index;
        if (index == "2-2") {
          alert("添加文字");
        }
      },
      logout() {
        // 删除 localStorage 中的用户名
        localStorage.removeItem('username');
        location.href = 'login.html';
      },
      //加载视频数据
      loadVideo() {
        axios.get("video/list").then(function (response) {
          v.videoArr = response.data;
        });
      },
      //加载新闻数据
      loadNews() {
        axios.get("news/list").then(function (response) {
          v.newsArr = response.data;
        });
      },
      //加载轮播文字数据
      loadSwipeText() {
        axios.get("swipetext/list").then(function (response) {
          v.textArr = response.data;
        });
      },
      openDrawer(textArr) {
        //点击分类修改按钮后打开抽屉
        console.log(textArr);
        v.dialogVisible = true;
        v.textArr = textArr;
      },
      //修改视频URL
      updateVideoUrl(index) {
        let videoUrl = prompt("请输入视频 URL");

        // 检查用户是否点击了取消按钮或没有输入内容
        if (videoUrl !== null) {
          axios
            .post(
              "video/update?id=" + v.videoArr[index].id + "&url=" + videoUrl
            )

            .then(function (response) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              v.loadVideo();
            });
        } else {
          // 用户取消输入或没有输入内容的处理逻辑
          this.$message({
            message: "修改失败",
            type: "warning",
          });
        }
      },
      //修改新闻文字
      updateNewsTitle(index) {
        let newsTitle = prompt("请输入新闻标题");

        // 检查用户是否点击了取消按钮或没有输入内容
        if (newsTitle !== null) {
          axios
            .post(
              "news/updateTitle?id=" +
              v.newsArr[index].id +
              "&title=" +
              newsTitle
            )

            .then(function (response) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              v.loadNews();
            });
        } else {
          // 用户取消输入或没有输入内容的处理逻辑
          this.$message({
            message: "修改失败",
            type: "warning",
          });
        }
      },
      //修改新闻图片外链
      updateNewsImage(index) {
        let newsImage = prompt("请输入新闻标题");

        // 检查用户是否点击了取消按钮或没有输入内容
        if (newsImage !== null) {
          axios
            .post(
              "news/updateImage?id=" +
              v.newsArr[index].id +
              "&image=" +
              newsImage
            )

            .then(function (response) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              v.loadNews();
            });
        } else {
          // 用户取消输入或没有输入内容的处理逻辑
          this.$message({
            message: "修改失败",
            type: "warning",
          });
        }
      },
      updateText() {
        let text1 = this.swipetext.text1;
        let text2 = this.swipetext.text2;

        // 检查用户是否点击了取消按钮或没有输入内容
        if (text1 !== "" && text2 !== "") {
          axios
            .post(
              "news/updateText1?id=" + v.textArr.id + "&text1=" + text1
            )
            .then((response) => {
              axios
                .post(
                  "news/updateText2?id=" +
                  v.textArr.id +
                  "&text2=" +
                  text2
                )
                .then((response) => {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  v.loadSwipeText();
                  v.dialogVisible = false;
                });
            })
            .catch((error) => {
              this.$message({
                message: "修改失败",
                type: "warning",
              });
            });
        } else {
          // 用户取消输入或没有输入内容的处理逻辑
          this.$message({
            message: "修改失败",
            type: "warning",
          });
        }
      },
    },
  });
</script>

</html>